<template>
  <el-collapse
      class = "widget-collapse"
      v-model = "activeNames"
  >
    <el-collapse-item name = "a">
      <template #title>
        &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>容器</span>
      </template>
      <draggable
          :clone = "onContainerCopy"
          :group = "{name: 'starHorseGroup', pull: 'clone', put: false}"
          :sort = "false"
          @end = "onEnd"
          @start = "onStart"
          animation = "300"
          ghost-class = "ghost"
          item-key = "key"
          tag = "ul"
          v-model = "containerList"
      >
        <li
            class = "field-item"
            v-for = "item in containerList"
        >&nbsp;&nbsp;<span><user-icon :icon = "item.icon"/>&nbsp;&nbsp;{{ item.name }}</span>
        </li>
      </draggable>
    </el-collapse-item>
    <el-collapse-item name = "b">
      <template #title>
        &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>表单元素</span>
      </template>
      <draggable
          :clone = "onFormItemCopy"
          :group = "{name: 'starHorseGroup', pull: 'clone', put: false}"
          :sort = "false"
          @end = "onEnd"
          @start = "onStart"
          @remove = "onRemove"
          animation = "300"
          ghost-class = "ghost"
          item-key = "key"
          tag = "ul"
          v-model = "formDataList"
      >
        <li
            class = "field-item"
            v-for = "item in formDataList"
        >&nbsp;&nbsp;<span><user-icon :icon = "item.icon"/>&nbsp;&nbsp;{{ item.name }}</span>
        </li>
      </draggable>
    </el-collapse-item>
    <el-collapse-item name = "c">
      <template #title>
        &nbsp;<user-icon icon = "fa-grip-lines-vertical"/>&nbsp;&nbsp;<span>自定义组件</span>
      </template>
    </el-collapse-item>
  </el-collapse>

</template>

<script>
import {containerDatas, formDatas} from './form_data'
import {inject, ref} from 'vue'

export default {
  name: 'FieldPanel',

  setup(props, context) {
    let formDataList = ref(formDatas)
    let containerList = ref(containerDatas)
    let activeNames = ref(['a', 'b', 'c', 'd'])
    let starHorseDynamicForm = inject('starHorseDynamicForm')
    let dragingItem = inject('dragingItem')
    // formDataList=formDatas;
    return {
      formDataList,
      containerList,
      activeNames,
      dragingItem,
      starHorseDynamicForm
    }
  },
  methods: {
    onContainerCopy(data) {
      return this.onDataCopy(data, 'container')
    },
    onFormItemCopy(data) {
      return this.onDataCopy(data, 'formItem')
    },
    onDataCopy(data, type) {
      let _this = this
      let reData = JSON.parse(JSON.stringify(data))
      let ms = new Date().getTime()
      reData['id'] = 'Id' + ms

      reData.preps['id'] = reData['id']
      if (reData.type === 'button') {
        reData.preps['btnLabel'] = reData.name
      } else {
        reData.preps['label'] = reData.name
      }

      reData.preps['name'] = reData.type + ms
      this.starHorseDynamicForm[reData.preps.name] = null
      reData['compType'] = type
      _this.dragingItem = reData
      return reData
    },
    onStart() {
    },
    onEnd() {
    }
  }
}
</script>

<style lang = "scss" scoped>
.widget-collapse {
  border-top-width: 0;
  height: inherit;

  .el-collapse-item__header {
    padding-left: 10px;
    font-weight: bold;
  }

  .el-collapse-item__content {
    padding-bottom: 6px;
    margin-left: 8px;

    ul {
      padding-left: 10px; /* 重置IE11默认样式 */
      margin: 0; /* 重置IE11默认样式 */
      margin-block-start: 0;
      margin-block-end: 0.25em;
      padding-inline-start: 10px;

      &:after {
        content: '';
        display: block;
        clear: both;
      }

      .field-item {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        width: 115px;
        float: left;
        margin: 2px 6px 6px 0;
        cursor: move;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #f1f2f3;
      }

      .field-item:hover {
        background: #ebeef5;
        outline: 1px solid #999999;
      }

      .drag-handler {
        position: absolute;
        top: 0;
        left: 160px;
        background-color: #dddddd;
        border-radius: 5px;
        padding-right: 5px;
        font-size: 11px;
        color: #666666;
      }
    }
  }
}
</style>